<template>
	<view class="container">
		<u-sticky bgColor="#fff" zIndex="888">
			<u-tabs v-model="current" lineWidth="25" :list="clasList" keyName="title" lineColor="#3C9CFF"
				@change="table">
			</u-tabs>
		</u-sticky>

		<view class="classify">
			<template v-for="item in clasList">
				<view class="classify-f" v-if="current == item.id" :key="item.id">
					<view class="classify-flex">
						<u-tabs v-model="current" :list="item._child" keyName="title" @change="sectionChange"
							lineHeight="0" inactiveStyle="font-size: 26rpx;"
							activeStyle="color:#3C9CFF; font-size: 26rpx;">
						</u-tabs>
					</view>
				</view>
			</template>
		</view>

		<view class="classify">
			<view class="cate-container" v-if="livecoursedataList.length">
				<view class="cate-title">
					<view class="text">近期直播</view>
					<view class="report" @click="moreJum">
						<text class="round">查看更多</text>
						<i class="iconfont icon-arrow-right"></i>
					</view>
				</view>
				<view class="cate-list">
					<view class="cate-list-record" v-for="item in livecoursedataList" :key="item.id"
						@click="jumps(item)">
						<view class="">
							<u--image :src="item.cover || errorProduct" width="110px" height="90px" mode="aspectFit"
								:errorIcon="errorProduct">
							</u--image>
						</view>
						<view class="cate-list-inform">
							<view class="inform-title">
								{{ item.title }}
							</view>
							<view class="inform-left">
								<view class="inform-price">
									{{ item.price == "0.00" ? "免费" : item.price }}
								</view>
								<view class=""> {{ item.view || 0 }}次观看 </view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="cate-container" v-if="dataList.length">
				<view class="cate-title">
					<view class="text">课程</view>
					<view class="report" @click="moreCurr">
						<text class="round">查看更多</text>
						<i class="iconfont icon-arrow-right"></i>
					</view>
				</view>
				<view class="cate-list">
					<view class="cate-list-record" v-for="item in dataList" :key="item.id" @click="jump(item)">
						<view class="">
							<u--image :src="item.cover || errorProduct" width="110px" height="90px" mode="aspectFit"
								:errorIcon="errorProduct">
							</u--image>
						</view>
						<view class="cate-list-inform">
							<view class="inform-title">
								{{ item.title }}
							</view>
							<view class="inform-left">
								<view class="inform-price">
									{{ item.price == "0.00" ? "免费" : item.price }}
									<text v-if="item.marking_price">{{
                    item.marking_price
                  }}</text>
								</view>
								<view class=""> {{ item.view || 0 }}次观看 </view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="cate-container cate-bottom" v-if="columndata.length">
				<view class="cate-title">
					<view class="text">{{ title }}视频</view>
					<view class="report" @click="moreJums">
						<text class="round">查看更多</text>
						<i class="iconfont icon-arrow-right"></i>
					</view>
				</view>
				<view class="cate-list">
					<view class="cate-list-record" v-for="item in columndata" :key="item.id" @click="jump(item)">
						<view class="">
							<u--image :src="item.cover || errorProduct" width="110px" height="90px" mode="aspectFit"
								:errorIcon="errorProduct">
							</u--image>
						</view>

						<view class="cate-list-inform">
							<view class="inform-title">
								{{ item.title }}
							</view>
							<view class="inform-left">
								<view class="inform-price">
									{{ item.price == "0.00" ? "免费" : item.price }}
									<text v-if="item.marking_price">{{
                    item.marking_price
                  }}</text>
								</view>
								<view class=""> {{ item.view || 0 }}次观看 </view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<PageNavBar :tabIndex="1" />
	</view>
</template>

<script>
	import PageNavBar from "@/components/nav_footer/index.vue";
	import {
		api_getCategory,
		api_getcolumnlist,
		api_getlivelist,
		api_getKnowledgeList3,
	} from "@/api/cate.js";
	export default {
		components: {
			PageNavBar,
		},
		data() {
			return {
				errorProduct: require("@/static/img/default_image.jpg"),
				current: "",
				isLoading: false,
				title: "",
				keyword: "",
				columndata: [],
				// 分类
				clasList: [],
				// 近期直播列表
				livecoursedataList: [],
				curNow: 0,
				dataList: [],
				form: {
					id: 134,
					limit: 10,
					page: 1,
					status: 1,
					shop_name: "db",
				},
			};
		},
		onLoad() {},
		created() {
			// this.current = this.clasList[0].id;

			this.getCategory();
		},
		methods: {
			tabErrorPicture(name, id) {
				// 列表图片加载失败
				let i = this[name].findIndex((v) => v.id == id);

				this[name][i].cover = this.errorProduct;
			},
			table(index) {
				this.curNow = 0;
				this.current = index.id;
				this.form.id = this.current;

				// 默认第一个
				this.title = this.clasList[index.index]._child[0].title;
				this.form.id = this.clasList[index.index]._child[0].id;

				this.getlivelist();
				this.getcolumnlist();
				this.getKnowledgeList();
			},

			sectionChange(index) {
				this.curNow = index.index;
				this.form.id = index.id;
				this.title = index.title;
				this.getlivelist();
				this.getcolumnlist();
				this.getKnowledgeList();
			},

			// 获取分类列表
			async getCategory() {
				uni.showLoading({
					title: "数据加载中..."
				});

				let result = await api_getCategory(this.form);

				if (result.code == 1) {
					this.clasList = result.data.list;
					this.current = this.clasList[0].id;
					if (this.clasList[0]) {
						this.title = this.clasList[0]._child[0].title;
					}
					this.getlivelist();
					this.getcolumnlist();
				} else {
					uni.showToast({
						title: result.msg,
						icon: "error",
					});
				}

				// console.log(result)
			},

			// 获取列表数据
			async getcolumnlist() {
				let res = await api_getcolumnlist({
					...this.form,
				});

				if (res.code == 1) {
					this.columndata = res.data.columndata;
				} else {
					uni.showToast({
						title: res.msg,
						icon: "error",
					});
				}
			},

			// 获取近期直播间列表
			async getlivelist() {
				uni.showLoading({
					title: "数据加载中...",
					mask: true, // 是否显示透明蒙层，防止触摸穿透
				});
				let res = await api_getlivelist({
					...this.form,
				});
				uni.hideLoading();

				if (res.code == 1) {
					this.livecoursedataList = res.data.livecoursedata;
				} else {
					uni.showToast({
						title: res.msg,
						icon: "error",
					});
				}
			},

			// 获取课程
			async getKnowledgeList() {
				let res = await api_getKnowledgeList3(this.form);
				if (res.code == 1) {
					this.dataList = res.data.list;
				} else {
					uni.showToast({
						title: res.msg,
						icon: "error",
					});
				}
			},

			moreJum() {
				uni.navigateTo({
					url: "/pages/morelivelist/index" + `?id=${this.form.id}`,
				});
			},
			moreJums() {
				uni.navigateTo({
					url: "/pages/morecolumnlist/index" + `?id=${this.form.id}`,
				});
			},
			moreCurr() {
				uni.navigateTo({
					url: "/pages/curriculum/index" + `?id=${this.form.id}`,
				});
			},
			jumps(item) {
				uni.navigateTo({
					url: "/pages/livecontent/index" + `?id=${item.id}&columnid=order`,
				});
			},

			jump(item) {

				let type = item.type; // 假设商品类型为图文

				switch (type) {
					case "image_text":
						// 当商品类型为图文时执行的操作
						uni.navigateTo({
							url: "/pages/free_courses/index" + `?id=${item.id}&columnid=order&data_type=${type}`,
						});
						// uni.navigateTo({
						// 	url: "/pages/free_courses/index" + `?id=${item.id}`,
						// });
						break;
					case "audio":
						// 当商品类型为音频时执行的操作
						uni.navigateTo({
							url: "/pages/audiocontent/index" + `?id=${item.id}&columnid=order&data_type=${type}`,
						});
						break;
					case "video":
						// 当商品类型为视频时执行的操作
						uni.navigateTo({
							url: "/pages/videocontent/index" + `?id=${item.id}&columnid=order&data_type=${type}`,
						});
						break;
					case "exam":
						// 当商品类型为专栏时执行的操作
						uni.navigateTo({
							url: "/pages/examcontent/index" + `?id=${item.id}&columnid=order&data_type=${type}`,
						});
						break;
					case "column":
						// 当商品类型为专栏时执行的操作
						uni.navigateTo({
							url: "/pages/product/index" + `?id=${item.id}&columnid=order&data_type=${type}`,
						});
						break;
					default:

				}




			},

			jump2(item) {
				uni.navigateTo({
					url: "/pages/videocontent/index" + `?id=${item.id}&columnid=order`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.classify {
		// display: flex;
		background: #fff;

		// padding: 10rpx 0;
		// padding-top: 20rpx ;
		// padding-bottom: 10rpx;
		.classify-f {
			// display: flex;
			width: 100%;

			.classify-flex {
				// display: flex;
				// flex-wrap: wrap;
				// box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
				border-bottom: 4rpx solid rgba(0, 0, 0, 0.1);
				padding-left: 40rpx;
				font-size: 22rpx;
			}

			.tag-u {
				margin: 0px 4rpx;
				// width: 15%;
			}
		}
	}

	.cate-bottom {
		padding-bottom: 50px;
	}

	.my_wrapper {
		background-color: #eee;
	}

	.container {
		background: #eeeeee;
		height: 100vh;
	}

	.cate-container {
		.cate-title {
			background: #fff;
			display: flex;
			justify-content: space-between;
			padding: 14rpx 20rpx;
			border-radius: 10rpx;
			align-items: center;
			// border: 1px solid #eee;
			height: 40rpx;

			>view {
				display: flex;
				align-items: center;
				font-size: 28rpx;
			}

			.text {
				font-weight: bold;
				font-size: 32rpx;
			}
		}

		.cate-list {
			padding: 10rpx 0;

			.cate-list-record {
				display: flex;
				justify-content: space-between;
				padding: 14rpx 10rpx;
				border-radius: 10rpx;
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
				background: #fff;
				margin: 0px 14rpx;
				margin-bottom: 10rpx;

				.cate-list-inform {
					// background: #fff;
					// box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 20rpx 16rpx;

					.inform-title {
						font-size: 24rpx;
					}

					.inform-left {
						display: flex;
						justify-content: space-between;

						.inform-price {
							color: red;
						}

						text {
							display: inline-block;
							margin-left: 5px;
							color: #969799;
							font-size: 10px;
							text-decoration: line-through;
						}

						>view {
							font-size: 24rpx;
							color: #969799;
						}
					}
				}
			}
		}
	}

	/deep/ {
		.u-image__error {
			div {
				background-size: contain !important;
				background-position: center center !important;
			}
		}
	}
</style>